<template>
	<view class="index" :style="{'height':windowHeight}">
		<clothes></clothes>
		<view class="setDetaile">
			<view class="setDetaile-one">
				<view class="one">
					<view class="one-left">已选套餐</view>
					<view class="one-rig">{{MenuInfo.thaliName}}</view>
				</view>
				<view class="two">
					<view class="one-left">套餐有效期:</view>
					<view class="one-rig">{{MenuInfo.packageCycle}}天</view>
				</view>
				<view class="two">
					<view class="one-left">套餐价格:</view>
					<view class="one-rig">{{MenuInfo.payAmount}}</view>
				</view>
				<view class="two">
					<view class="one-left">账户余额:</view>
					<view class="one-rig">0.00元</view>
				</view>
			</view>

			<view class="recharge-zf">
				<view class="recharge-zf-txt">支付方式</view>
				<view class="recharge-zfs">
					<view class="recharge-zf-left">
						<view class="zf-left-img">
							<image src="/static/index/wx.png" mode=""></image>
						</view>
						<view class="zf-left-txt">微信支付</view>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 1">
						<image src="/static/qq1.png" mode=""></image>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 0" @click="monyState = 1">
						<image src="/static/qq2.png" mode=""></image>
					</view>
				</view>
				<view class="recharge-zfs">
					<view class="recharge-zf-left">
						<view class="zf-left-img">
							<image src="/static/index/zfb.png" mode=""></image>
						</view>
						<view class="zf-left-txt">支付宝支付</view>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 0">
						<image src="/static/qq1.png" mode=""></image>
					</view>
					<view class="recharge-zf-rig" v-if="monyState == 1" @click="monyState = 0">
						<image src="/static/qq2.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- <view class="setDetaile-two">
				<view class="two-t">支付方式</view>
				<view class="two-li">
					<view class="two-li-left">
						<view class="two-li-left-img">123</view>
						<view class="two-li-left-txt">123</view>
					</view>
					<view class="two-li-rig">123</view>
				</view>
			</view> -->
		</view>
		<view class="Recharge-btm">
			<view class="Recharge-btms">
				<view class="btm-left">合计: <span>￥ {{MenuInfo.payAmount}} 元</span></view>
				<view class="btm-rig" @click="dingGou">订购</view>
			</view>
		</view>

		<!-- 实名弹框 -->
		<uni-popup ref="popup" background-color="#fff" borderRadius="10rpx">
			<view style="width: 500rpx;border-radius: 15rpx;padding: 20rpx 30rpx;">
				<view style="text-align: center;padding-top: 10rpx;font-size: 32rpx;font-weight: 600;">通知</view>
				<view style="font-size: 28rpx;padding-top: 20rpx;">您当前还没有实名认证，请您前往实名认证!</view>
				<view style="display: flex;flex-wrap: nowrap;justify-content:space-between;padding-top: 20rpx;">
					<view
						style="width: 45%;border: 2rpx solid #eee;text-align: center;height: 70rpx;border-radius: 10rpx;line-height: 70rpx;font-size: 26rpx;"
						@click="ZanBu">暂不实名</view>
					<view
						style="width: 45%;border: 2rpx solid #eee;text-align: center;height: 70rpx;border-radius: 10rpx;line-height: 70rpx;font-size: 26rpx;background: #409EFF;color: #fff;"
						@click="ShiMing">前往实名</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		wechatInAppPayment,
		wechatH5Payment,
		isWechatBrowser
	} from '@/utils/payment';

	export default {
		components: {},
		data() {
			return {
				windowHeight: "200px",
				MenuInfo: {},
				userId: '', //userId
				monyState: 1, //0支付宝  1微信
			}
		},
		onLoad() {
			const value = uni.getStorageSync('MenuInfo');
			this.MenuInfo = value
			const infoValue = uni.getStorageSync('info');
			this.userId = infoValue.userId
			console.log(value)
			this.GaoDu() //判断手机高度
		},
		methods: {
			// 暂不实名
			ZanBu() {
				this.$refs.popup.close()
			},
			// 实名
			ShiMing() {
				uni.navigateTo({
					url: '/pages/index/authentication'
				});
			},
			// 订购
			dingGou() {
				this.$REQ(this.$api.queryOpenid, {
					userId: this.userId,
				}, 'POST').then(res => {
					console.log(res)
					if (res.data.data.openid == null) {

						this.qrconnect() //获取Code
					} else {
						this.payJsapi(res.data.data.openid) //调用JSAPI支付
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 调用JSAPI支付
			payJsapi(openid) {
				var that = this;
				// if (!isWechatBrowser()) {
				// 	uni.showToast({
				// 		duration: 1000,
				// 		title:'请在微信浏览器中打开进行支付',
				// 		icon: 'none',
				// 	})
				// 	return;
				// }
				console.log(openid)
				let data = {
					totalFee: this.MenuInfo.payAmount,
					walletFee: 0,
					wechatFee: this.MenuInfo.payAmount,
					userId: this.userId,
					packageId: this.MenuInfo.id,
					payType: 'thali',
					openid: openid,
				}
				this.$REQ(this.$api.payJsapi, data, 'POST').then(res => {
					console.log(res)
					this.Pay(res.data.data)
				}).catch(err => {
					console.log(err)
				})
			},
			Pay(e) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest',e,
					function(res) {
						console.log(res)
						// // 支付成功
						// if (res.err_msg == "get_brand_wcpay_request:ok") {
						// 	// 使用以上方式判断前端返回,微信团队郑重提示：
						// 	//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						// }
						// // 支付过程中用户取消
						// if (res.err_msg == "get_brand_wcpay_request:cancel") {}
						// // 支付失败
						// if (res.err_msg == "get_brand_wcpay_request:fail") {}
						// /**
						//  * 其它
						//  * 1、请检查预支付会话标识prepay_id是否已失效
						//  * 2、请求的appid与下单接口的appid是否一致
						//  * */
						// if (res.err_msg == "调用支付JSAPI缺少参数：total_fee") {}
					});
				
				return
				wechatInAppPayment(
					e,
					function(res) {
						uni.showToast({
							duration: 3000,
							title: '支付成功',
							icon: 'none',
						})
						// that.showResult = true;
						// that.resultTitle = '支付成功';
						// that.resultMessage = '感谢您的购买！';
						// 可以在这里处理支付成功后的逻辑，如跳转到订单详情页
					},
					function(res) {
						uni.showToast({
							duration: 3000,
							title: '支付失败',
							icon: 'none',
						})
						// that.showResult = true;
						// that.resultTitle = '支付失败';
						// that.resultMessage = res.err_msg || '支付过程中出现错误';
					}
				);
				return
				


				return
				console.log(e)
				console.log(this.monyState)
				// var orderInfo = {
				// 	"appid": e.appId, // 应用ID（AppID）
				// 	"partnerid": "148*****52", // 商户号（PartnerID）
				// 	"prepayid": "wx202254********************fbe90000", // 预支付交易会话ID
				// 	"package": e.package, // 固定值
				// 	"noncestr":e.nonceStr, // 随机字符串
				// 	"timestamp": e.timeStamp, // 时间戳（单位：秒）
				// 	"sign":e.signType // 签名，这里用的 MD5 签名
				// };
				uni.getProvider({
					service: 'payment',
					success: function(res) {
						console.log(res.provider)
						if (~res.provider.indexOf('wxpay')) {
							uni.requestPayment({
								"provider": "wxpay", //固定值为"wxpay"
								"orderInfo": e,
								success: function(res) {
									var rawdata = JSON.parse(res.rawdata);
									console.log("支付成功");
								},
								fail: function(err) {
									console.log('支付失败:' + JSON.stringify(err));
								}
							});
						}
					}
				});
			},
			// 获取Code
			qrconnect() {
				return
				// let redirect_uri = encodeURIComponent(window.location.href);
				let appid = 'wx720fd6caee0ec459'
				let redirect_uri = 'http%3A%2F%2Ftest.vsbook.cn'
				// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect"
				// window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri="+redirect_uri+"&response_type=code&scope=snsapi_base&state=3&connect_redirect=1#wechat_redirect"

				let url =
					'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx720fd6caee0ec459&redirect_uri=http%3A%2F%2Ftest.vsbook.cn&response_type=code&scope=snsapi_base&state=3&connect_redirect=1#wechat_redirect'
				window.location.href = url
				return

				uni.request({
					url: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx720fd6caee0ec459&redirect_uri=http%3A%2F%2Ftest.vsbook.cn&response_type=code&scope=snsapi_base&state=3&connect_redirect=1#wechat_redirect', //仅为示例，并非真实接口地址。
					method: 'get',
					header: {
						['tenant-id']: `${'1'}`
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res.data);
						} else {
							uni.showToast({
								duration: 1000,
								title: res.data.msg,
								icon: 'none',
							})
						}

					}
				});


			},


			// 判断手机高度
			GaoDu() {
				console.log('12356')
				// 判断手机页面的高度
				uni.getSystemInfo({

					success: (res) => {
						this.windowHeight = res.windowHeight + "px";
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.index {
		width: 100%;
		height: 100%;
		background: #F5F4F9;
	}

	.setDetaile {
		padding: 25rpx;
	}

	.setDetaile-one {

		padding: 25rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.one {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F3F3F3;
	}

	.one-left {
		font-size: 28rpx;
	}

	.one-rig {
		font-size: 26rpx;
		color: #5C8AD6;
	}

	.two {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.setDetaile-two {
		padding: 25rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 40rpx;
	}

	.two-t {
		font-size: 32rpx;
	}

	.two-li {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.two-li-left {
		display: flex;
	}

	.recharge-zf {
		padding: 25rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
	}

	.recharge-zf-txt {
		font-size: 38rpx;
		font-weight: 600;
	}

	.recharge-zfs {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.recharge-quan {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 25rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 25rpx;
	}

	.quan-left {
		display: flex;

	}

	.quan-left-img {
		width: 50rpx;
		height: 50rpx;

	}

	.quan-left-img image {
		width: 100%;
		height: 100%;
	}

	.quan-left-txt {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 50rpx;
		padding-left: 10rpx;
	}

	.quan-rig {
		display: flex;
	}

	.quan-rig-img {
		width: 40rpx;
		height: 50rpx;
	}

	.quan-rig-img image {
		width: 100%;
		height: 100%;
	}

	.quan-rig-txt {
		line-height: 50rpx;
		padding-right: 15rpx;
		font-size: 28rpx;
		color: #5789D0;
	}

	.Recharge-btm {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background: #ffffff;
		width: 100%;


	}

	.Recharge-btms {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 30rpx 30rpx 50rpx;
	}

	.btm-left {
		font-size: 32rpx;
		color: #7A7A7A;
		line-height: 90rpx;
	}

	.btm-left span {
		color: #148BF8;
	}

	.btm-rig {
		width: 350rpx;
		height: 90rpx;
		border-radius: 100rpx;

		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		font-size: 32rpx;
		background-image: linear-gradient(to right, rgba(58, 101, 255), rgba(148, 103, 254));
	}

	.recharge-zf-left {
		display: flex;
		padding-top: 30rpx;
	}

	.zf-left-img {
		width: 60rpx;
		height: 60rpx;
	}

	.zf-left-img image {
		width: 100%;
		height: 100%;
		border-radius: 100rpx;
	}

	.zf-left-txt {
		font-size: 28rpx;
		padding-left: 20rpx;
		font-weight: 600;
		line-height: 60rpx;
	}

	.recharge-zf-rig {
		width: 45rpx;
		height: 45rpx;
		padding-top: 30rpx;
	}

	.recharge-zf-rig image {
		width: 100%;
		height: 100%;
	}

	.Recharge-btm {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		background: #ffffff;
		width: 100%;


	}

	.Recharge-btms {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		padding: 30rpx 30rpx 50rpx;
	}

	.btm-left {
		font-size: 32rpx;
		color: #7A7A7A;
		line-height: 90rpx;
	}

	.btm-left span {
		color: #148BF8;
	}

	.btm-rig {
		width: 350rpx;
		height: 90rpx;
		border-radius: 100rpx;

		text-align: center;
		line-height: 90rpx;
		color: #ffffff;
		font-size: 32rpx;
		background-image: linear-gradient(to right, rgba(58, 101, 255), rgba(148, 103, 254));
	}
</style>